<!--
*@Author: QWP
*@Description: 目录组件
*@Date: 2024-07-11 10:03:32
-->
<template>
  <a-layout class="f-h-100">
    <a-layout-header v-if="title != ''" 
      style="background-color: #fff; padding: 0">
      <span class="u-catalogue-title">{{ title }}</span>
    </a-layout-header>
    <a-layout-content class="f-h-100" 
      style="overflow: auto;
        background-color: #fff;">
      <a-tree :defaultExpandAll="true"
        v-bind="$attrs"
        class="u-catalogue-tree">
        <template #title="{ title, key }">
          <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
          <template v-else>{{ title }}</template>
        </template>
        <template #switcherIcon="{ switcherCls }"></template>
      </a-tree>
    </a-layout-content>
  </a-layout>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-catalogue'
})
import { ref, reactive, computed, onMounted } from 'vue' 
import { useRoute, useRouter } from 'vue-router'

interface Props {
  title?: string
}
withDefaults(defineProps<Props>(), {
  title: ''
})

</script>

<style lang='scss'>
.u-catalogue-title {
  font-family: PingFang SC, PingFang SC; 
  font-weight: 400;
  font-size: 18px;
}
.u-catalogue-tree {
  .ant-tree-treenode {
    border-left: 2px solid rgba(0,0,0,0.06);
    .ant-tree-switcher {
      width: 10px;
    }
    // .ant-tree-indent {
    //   width: 18px;
    // }
  }
  .ant-tree-treenode-selected {
    border-color: #1677FF;
  }
  .ant-tree-node-selected {
    background-color: #fff !important;
    color: #1677FF;
  }
}
</style>